<template>
	<view>
		<view class="content">
			<view class="top_box">
				<image src="../../static/img/quest.png" mode="" @tap="blocknew"></image>
				<navigator url="/pages/login/regiester" class="top_box_right">注册</navigator>
			</view>
			<view class="login_box">
				<view class="login_title">账号密码登录</view>
				<view class="login_input_box">
					<view class="login_input_item">
						<input type="number" value="" v-model="account" placeholder="请输入手机号" @input="accountInput" />
						<image :style="acflag?'':'display:none'" src="../../static/img/kdfe@df.png" class="clear_btn" @click="emptyacc(0)"></image>
					</view>
					<view class="login_input_item">
						<input :style="looktext?'display:none':''" password=true maxlength="16" v-model="password" value="" placeholder="请输入6-16位密码" @input="passInput" />
						<input :style="looktext?'':'display:none'" type="text" maxlength="16" v-model="password" value="" placeholder="请输入6-16位密码" @input="passInput"/>
						<view class="input_box_r" :style="paflag?'':'display:none'">
							<image src="../../static/img/kdfe@df.png" class="clear_btn" @click="emptyacc(1)"></image>
							<image :src="looktext?'../../static/img/@seelonFd.png':'../../static/img/look@ef.png'" mode="" class="see_btn" @click="looktext = !looktext" ></image>
						</view>
						
					</view>
				</view>
				<view class="login_btn1" @click="logingo()">登录</view>
				<view class="login_other_box">
					<view class="login_other_l">
						<image :src="checked?'../../static/img/@checked.png':'../../static/img/nochecked.png'" mode=""  @click="passwordLabel()"></image>
						<view class="">记住密码</view>
					</view>
					<navigator url="/pages/login/forgetPsd"  class="login_other_r">忘记密码</navigator>
				</view>
			</view>
			<view class="btm_box">
				<image :src="checkflag?'../../static/img/@yesokDFdf.png':'../../static/img/nodfe@dfd.png'" mode="" @click="checkflag = !checkflag"></image>
				<view class="textbox">
					登录即代表您已同意
					<text class="xy_color" @tap="yhxy()">《用户协议》</text>与
					<text class="xy_color" @tap="yszc()">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import{login} from '../../api/login.js'
	export default {
		data() {
			return {
				account:'',
				password:'',
				//账号右边图标状态
				acflag:false,
				//密码右边图片状态
				paflag:false,
				//控制密码右边的切换
				looktext:false,
				//记住密码切换
				checked:false,
				//勾选同意协议
				checkflag:true,
			}
		},
		onLoad (){
			//页面加载是否记住密码
			this.passwords()
		},
		created() {
		},
		methods: {
			//监听账号密码变化
			accountInput(e){
				this.acflag = true,
				//取消记住密码
				this.checked = true,
				this.account = e.target.value;
				
			},
			//监听密码变化
			passInput(e){
				this.paflag = true,
				//取消记住密码
				this.checked = true,
				this.password = e.target.value;
			},
			//可见密码不可见密码切换
			boxtab(){
				this.looktext = !this.looktext
			},
			//登录操作
			logingo(e){
				login(this.account,this.password).then((res)=>{
					if(this.checkflag){
						uni.showToast({
							title:'请勾选协议',
							duration:1000,
							icon:"none"
						})
						return;
					}
					if(res.code==1){
						uni.showToast({
							title: '登录成功',
							duration: 1000,
							icon:"none",
						});
						setTimeout(()=>{
								uni.setStorageSync('userinfo',JSON.stringify(res.data.userinfo)+'')
								uni.setStorageSync('token',res.data.userinfo.token)
								uni.switchTab({
									url:'/pages/index/index',
								})
						},1000)
					}else{
						uni.showToast({
							title: '登录失败',
							duration: 1000,
							icon:"none"
						})
					}
				})
			},
			//记住密码
			passwordLabel(){
				//记住密码
				if(this.checked){
					uni.setStorageSync('account',this.account),
					uni.setStorageSync('password',this.password)
				}else{
					uni.setStorageSync('account',''),
					uni.setStorageSync('password','')
				}
				this.checked = !this.checked
			},
			//页面加载账号密码
			passwords(){
				this.account = uni.getStorageSync('account'),
				this.password = uni.getStorageSync('password')
			},
			//返回原本页面
			blocknew(){
				//获取原本的页面地址
				let backpage = uni.getStorageSync('backpage')
				uni.switchTab({
					url:backpage
				})
			},
			//点击右边图标清空inpu内容
			emptyacc(id){
				id==0?this.account = '':this.password = ''
			},
			//用户协议跳转
			yhxy(){
				console.log("d")
				uni.navigateTo({
					url: '../login/yhxy',
				});
			},
			//隐私政策
			yszc(){
				uni.navigateTo({
					url:'../login/yszc'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	width: 100vw;
	    height: 100vh;
	    background-color: #fff;
	    overflow: hidden;
	.top_box{
		    width: 100%;
		    height: 100rpx;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    padding: 0 30rpx;
		image{
			width: 36rpx;
			height: 36rpx;
		}
		.top_box_right{
			font-size: 28rpx;
			    font-family: PingFang SC;
			    font-weight: 500;
			    color: #333;
		}
	}
	.login_box{
		    width: 100%;
		    margin-top: 10%;
		    height: 550rpx;
		.login_title{
			width: 80%;
			    margin: auto;
			    font-size: 44rpx;
			    font-family: PingFang SC;
			    font-weight: 700;
			    color: #333;
		}
		.login_input_box{
			width: 80%;
			    height: 200rpx;
			    margin: 0 auto;
			    margin-top: 40rpx;
			.login_input_item{
				width: 100%;
				    height: 100rpx;
				    display: flex;
				    align-items: center;
				    border-bottom: 1rpx solid #e5e5e5;
				    justify-content: space-between;
					.input_box_r{
						display: block;
						    font-size: 32rpx;
						    line-height: 1.4em;
						    height: 1.4em;
						    min-height: 1.4em;
						    overflow: hidden;
							
					}
					.clear_btn{
						    width: 26rpx;
						    height: 26rpx;
					}
					.see_btn{
						width: 26rpx;
						    height: 18rpx;
						    margin-left: 20rpx;
					}
					.see_btn1{
						    width: 26rpx;
						        height: 16rpx;
						        margin-left: 20rpx;
					}
				}
			}
		}
		.login_btn1{
			        width: 80%;
			        height: 88rpx;
			        margin: auto;
			        background: linear-gradient(
			    90deg
			    ,#ffdd47,#fcb630);
			        border-radius: 10rpx;
			        font-size: 30rpx;
			        font-family: PingFang SC;
			        font-weight: 500;
			        color: #fff;
			        display: flex;
			        justify-content: center;
			        align-items: center;
			        margin-top: 60rpx;
			    }
		.login_other_box{
			width: 80%;
			    margin: auto;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			    margin-top: 40rpx;
			.login_other_l{
				display: flex;
				    justify-content: flex-start;
				    align-items: center;
				    font-size: 24rpx;
				    font-family: PingFang SC;
				    font-weight: 500;
				    color: #666;
					image{
						width: 26rpx;
						    height: 26rpx;
						    margin-right: 10rpx;
					}
			}
			.login_other_r{
				font-size: 24rpx;
				    font-family: PingFang SC;
				    font-weight: 500;
				    color: #666;
				
			}
		}
		.btm_box{
			width: 100%;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    font-size: 22rpx;
			    font-family: PingFang SC;
			    font-weight: 500;
			    color: #999;
			    position: absolute;
			    bottom: 40rpx;
			image{
				width: 36rpx;
				    height: 36rpx;
				    margin-right: 20rpx;
			}
			.textbox{
				height: 36rpx;
				    width: auto;
				    display: flex;
				    justify-content: center;
				    align-items: center;
				.xy_color{
					font-size: 22rpx;
					    color: #333;
				}
			}
		}
	}
</style>
